<template>
  <div>
    <el-form :inline="true" :model="searchType" class="demo-form-inline" style="float: left">
      <el-form-item label="类别代码">
        <el-input
            size="mini"
            v-model="searchType.typeCode"
            placeholder="请输入类别代码"
        ></el-input>
      </el-form-item>

      <el-form-item label="类别名称">
        <el-input
            size="mini"
            v-model="searchType.typeName"
            placeholder="请输入类别名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="上级类别">
        <el-input
            size="mini"
            v-model="searchType.lastType"
            placeholder="请输入上级类别代码"
        ></el-input>
      </el-form-item>


      <el-form-item>
        <el-button size="small" type="primary" @click="page()">查询</el-button>
        <el-button size="small" type="info" @click="clearInfo2();page()">清空</el-button>

        <el-button
            size="small"
            type="primary"
            @click="dialogFormVisible = true; type={}"
        >+ 新增分类
        </el-button
        >
      </el-form-item>

    </el-form>


    <!-- 数据表格 -->
    <template>
      <el-table
          highlight-current-row
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"

      >
        <el-table-column type="index" width="100" label="序号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="typeCode" width="100" label="类别代码" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="typeName" width="100" label="类别名称" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="typeImg" width="140" label="类别图片" header-align="center"
                         align="center">
          <template slot-scope="{ row }">
            <el-image style="width: auto; height: 50px; border: none; cursor: pointer" :src="row.typeImg"
                      alt=""></el-image>
          </template>
        </el-table-column>

        <el-table-column prop="lastType" width="140" label="上级类别代码" header-align="center"
                         align="center"></el-table-column>

        <el-table-column label="操作" width="400" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                plain
                @click="selectById(scope.row.typeCode)"
            >编辑
            </el-button>

            <el-button
                size="mini"
                type="danger"
                plain
                @click="deleteById(scope.row.typeCode)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 新增 -->
    <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
      <el-form :model="type" label-width="80px">
        <el-form-item label="类别代码" :label-width="formLabelWidth">
          <el-input v-model="type.typeCode" placeholder="请输入类别代码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="type.typeName" placeholder="请输入类别名称" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="类别图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8083/upload"
              name="image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img style="width: 400px; height: 100px; border: none; cursor: pointer" v-if="type.typeImg"
                 :src="type.typeImg" class="avatar" alt="暂无"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


        <el-form-item label="上级类别代码" :label-width="formLabelWidth">
          <el-input v-model="type.lastType" placeholder="请输入上级类别代码" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;clearInfo()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="商品信息" :visible.sync="dialogForm2Visible">
      <el-form :model="type">
        <el-form-item label="类别代码" :label-width="formLabelWidth">
          <el-input v-model="type.typeCode" placeholder="请输入类别代码" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="type.typeName" placeholder="请输入类别名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8083/upload"
              name="image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img style="width: 400px; height: 100px; border: none; cursor: pointer" v-if="type.typeImg"
                 :src="type.typeImg" class="avatar" alt="暂无"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="上级类别代码" :label-width="formLabelWidth">
          <el-input v-model="type.lastType" placeholder="请输入上级类别代码" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false;clearInfo()">取 消</el-button>
        <el-button type="primary" @click="add2()">确 定</el-button>
      </div>
    </el-dialog>


    <br>
    <!--分页工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="background"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
    </el-pagination>


  </div>
</template>

<script>
import {addGoodType} from "@/api/goodType";
import {changeGoodType} from "@/api/goodType";
import {deleteGoodType} from "@/api/goodType";
import {page} from "@/api/goodType";

export default {
  data() {
    return {
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      formLabelWidth: "120px",
      dialogFormVisible: false, //控制对话框是否可见
      dialogForm2Visible: false, //控制对话框是否可见
      type: {//新增和编辑
        typeCode: "",
        typeName: "",
        typeImg: "",
        lastType: "",
      },
      searchType: {//条件查询
        typeCode: "",
        typeName: "",
        typeImg: "",
        lastType: "",
      },
      tableData: [],
    };
  },

  methods: {
    deleteById(id) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteGoodType(id).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("删除成功")
            this.page()
          }
        }).catch((e) => {
        })


      }).catch(() => {
        //用户点击取消按钮
        this.$message.info("已取消删除");
      });
    },

    selectById(id) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].typeCode === id) {
          this.type = this.tableData[i];
          break;
        }
      }
      this.dialogForm2Visible = true

    },
    clearInfo() {
      this.type = {
        typeCode: "",
        typeName: "",
        typeImg: "",
        lastType: "",
      }
    },
    clearInfo2() {
      this.searchType = {
        typeCode: "",
        typeName: "",
        typeImg: "",
        lastType: "",
      }
    },
    add() {
      const {type} = this;
      if (!type.typeCode || !type.typeName || !type.typeImg) {
        this.$message("请完整填写");
      } else {
        addGoodType(this.type).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("添加成功")
            this.dialogFormVisible = false
            this.clearInfo()
            this.page()
          }
        }).catch((e) => {
        })
      }

    },
    add2() {
      const {type} = this;
      if (!type.typeCode || !type.typeName || !type.typeImg) {
        this.$message("请完整填写");
      } else {
        changeGoodType(this.type).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("修改成功")
            this.dialogForm2Visible = false
            this.clearInfo()
          }
        }).catch((e) => {
        })
      }

    },


    //分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val;
      this.page();
    },
    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val;
      this.page();
    },

    // 查询分页数据
    page() {
      page(
          this.searchType,
          this.currentPage,
          this.pageSize
      ).then((res) => {
        console.log(res);
        if (res.data.code != 0) {
          this.totalCount = res.data.data.total;
          this.tableData = res.data.data.rows;
        }
      }).catch((e) => {
      });
    },
    //文件上传相关
    handleAvatarSuccess(res, file) {
      this.type.typeImg = res.data;
      this.$forceUpdate()//纯nm
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.startsWith("image/");
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },


  },
  mounted() {
    this.page();
  },
};
</script>
<style>

</style>
